<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
	.txt{	
		font-weight:bold;
        border:thin solid #000000;
        padding:5px;
        background-color:yellow;           
	}
</style>
<script src="/headfirst_js/debug/debug.js"></script>
<script>
	var debug;
	//각 엘리멘트를 얻는데는 많은 타이핑이 필요하다. 해결책으로 만든 래퍼 함수
	function id(name){
		return document.getElementById(name);
	}
	
	function tag(name,elem){
		return (elem||document).getElementsByTagName(name);
	}
	
	//스크립트 에약어 for,class등을 적절한 이름으로 변경하며 속성을 설정하고 값을 리턴한다. 
	function attr(elem,name,value){
		if(!name||name.constructor != String){
			return "";
		}		
		name = {"for":"htmlFor","class":"className"}[name]||name;		
		if(value != null){
			elem[name] = value;
			if(elem.setAttribute){
				elem.setAttribute(name,value);
			}
		}		
		return elem[name]||elem.getAttribute(name)||"";
	}
	
	
	window.onload = function(e){
		debug =  new DebugConsole();
		attr(id("textField"),"class","txt");
		
		debug.displayMsg(attr(tag("div")[0],"style"));
	}
</script>
</head>
<body>
 <div style="margin-top:25px; text-align:center">
     <img id="seat0" src="" alt="" />
      <img id="seat1" src="" alt="" />
      <img id="seat2" src="" alt="" />
      <img id="seat3" src="" alt="" />
      <img id="seat4" src="" alt="" />
      <img id="seat5" src="" alt="" />
      <img id="seat6" src="" alt="" />
      <img id="seat7" src="" alt="" />
      <img id="seat8" src="" alt="" /><br />
      <img id="seat9" src="" alt="" />
      <img id="seat10" src="" alt="" />
      <img id="seat11" src="" alt="" />
      <img id="seat12" src="" alt="" />
      <img id="seat13" src="" alt="" />
      <img id="seat14" src="" alt="" />
      <img id="seat15" src="" alt="" />
      <img id="seat16" src="" alt="" />
      <img id="seat17" src="" alt="" /><br />
      <img id="seat18" src="" alt="" />
      <img id="seat19" src="" alt="" />
      <img id="seat20" src="" alt="" />
      <img id="seat21" src="" alt="" />
      <img id="seat22" src="" alt="" />
      <img id="seat23" src="" alt="" />
      <img id="seat24" src="" alt="" />
      <img id="seat25" src="" alt="" />
      <img id="seat26" src="" alt="" /><br />
      <img id="seat27" src="" alt="" />
      <img id="seat28" src="" alt="" />
      <img id="seat29" src="" alt="" />
      <img id="seat30" src="" alt="" />
      <img id="seat31" src="" alt="" />
      <img id="seat32" src="" alt="" />
      <img id="seat33" src="" alt="" />
      <img id="seat34" src="" alt="" />
      <img id="seat35" src="" alt="" /><br />
      <div id="textField" > dom load ok</div>
      <input type="button" id="findseats" value="Find Seats" />
    </div>
</body>
</html>